import React from 'react';
import ReactDOM from 'react-dom';

class HomeSlider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            status:0,
            data:[]
        };
    }

    componentWillMount() {

      $.get(CBH.apiRoot+"/?g=api&m=Mindex&a=banners", function(result) {
          this.setState(result);
      }.bind(this),'jsonp');

    }

    componentDidMount(){
      var mySwiper1 = new Swiper ('#hss', {
        direction: 'horizontal',
        loop: true,
        longSwipesRatio:0.1,
        threshold : 100,
        touchAngle : 20,
        // shortSwipes : false,
        nextButton: '.swiper-button-next1',
        prevButton: '.swiper-button-prev1',
      });
    }

    componentDidUpdate() {
      var mySwiper1 = new Swiper ('#hss', {
        direction: 'horizontal',
        loop: true,
        longSwipesRatio:0.1,
        threshold : 100,
        touchAngle : 20,
        // shortSwipes : false,
        nextButton: '.swiper-button-next1',
        prevButton: '.swiper-button-prev1',
      });
    }

    render () {

        if(!this.state){
            return <span>loading</span>;
        }else{
            if(this.state.data)
               var listItems =  this.state.data.map((item,i) =>
                   <div className="swiper-slide" key={i}>
                     <a href={ item.link }>
                       <img className="slideImg" src={ CBH.imgUploadPath+'/data/upload/'+item.src } alt={ item.title }/>
                     </a>
                   </div>
               );
        }
        return (
          <div className="swiper-container" id="hss">
              <div className="swiper-wrapper">
                {listItems}
              </div>
              <div className="swiper-button-prev1"></div>
              <div className="swiper-button-next1"></div>
          </div>
        )
  }
}

export default HomeSlider
